<template>
  <div class="p-4">
    <SiteGrowCard :is-loading="isLoading" :grow-card-list="growCardList"
                  class="enter-y"></SiteGrowCard>
    <SiteAnalysis :is-loading="isLoading" :analysis-item="analysisItem"
                  class="!my-4 enter-y"></SiteAnalysis>
  </div>
</template>

<script lang="ts">
  import {defineComponent, onMounted, toRefs} from '@vue/runtime-core';
  import {reactive} from "vue";
  import {queryAnalysisInfo} from "/@/api/core/system";
  import SiteGrowCard from "./siteGrowCard.vue";
  import SiteAnalysis from "./siteAnalysis.vue";
  import {HttpResult} from "/@/api/core/model/coreModel";

  export default defineComponent({
    components: {
      SiteGrowCard,
      SiteAnalysis,
    },
    props: {},
    setup() {

      const data = reactive({
        isLoading: true,
        growCardList: [] as any,
        analysisItem: [] as any,
      });

      const queryData = () => {
        data.isLoading = true;
        data.growCardList = [{}, {}, {}, {}];
        data.analysisItem = {
          visitItem: [], activeItem: [], monthItem: []
        };
        queryAnalysisInfo().then((result: HttpResult) => {
          data.isLoading = false;
          if (result.code == 0) {
            data.growCardList = result.data.grow_card_list;
            data.analysisItem = result.data.analysis_item;
          }
        });
      };

      onMounted(() => {
        queryData();
      });

      return {
        ...toRefs(data),
      };
    }
  });

</script>

<style scoped>

</style>
